<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>大作业_简版日历</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#box {
			width: 280px;
			height: 360px;
			margin: 50px auto;
			background: linear-gradient(#299a0b, #0ebaa3);
			color: aliceblue;
			line-height: 40px;
		}

		#header {
			height: 40px;
			color: aliceblue;
			line-height: 40px;
		}

		#header span {
			float: left;
			text-align: center;
			margin-top: 10px;
			line-height: 40px;
		}

		#prev,
		#next {
			width: 20%;
			line-height: 40px;
			cursor: pointer;
		}

		#current {
			width: 60%;
			line-height: 40px;
		}

		#week li {
			width: 40px;
			text-align: center;
			float: left;
			line-height: 40px;
		}

		#content li {
			width: 40px;
			text-align: center;
			float: left;
			line-height: 40px;
		}
	</style>
</head>

<body>
	<div id="box">
		<div id="header">
			<span id="prev" data-value="-1">上</span>
			<span id="current"></span>
			<span id="next" data-value="1">下</span>
		</div>
		<ul id="week">
			<li>日</li>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
		</ul>
		<ul id="content">
			<!-- <li>31</li>
					<li>1</li>
					<li>2</li> -->

			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
			<li>32</li>
			<li>33</li>
			<li>34</li>
			<li>35</li>
			<li>36</li>
			<li>37</li>
			<li>38</li>
			<li>39</li>
			<li>40</li>
			<li>41</li>
			<li>42</li>
		</ul>
	</div>
</body>
<script>
	// (1)  传入一个日期/日期对象  => 返回本月第一天星期几(前提:不影响原日期)
	// (2)  传入一个日期/日期对象  => 返回上个月有多少天(前提:不影响原日期)
	// (3)  传入一个日期/日期对象  => 返回当前月有多少天(前提:不影响原日期)


	// var arr = [1, 2, 3];
	// var brr = arr;
	// brr.push(4);
	// console.log(arr, brr);


	var date = new Date(); // 对象 (引用类型)

	// date1 = new Date(date);   //根据原日期得到新日期 => 修改新日期不会影响原日期
	// date1.setDate(1);
	// var week = date1.getDay()
	// console.log(week);
	// console.log(date1);
	// console.log(date);

	// 返回本月第一天星期几
	// function getFirstDayWeek(date) {  // date => 形参 => 局部变量  a = date
	// 	date = new Date(date);   //根据原日期得到新日期 => 修改新日期不会影响原日期
	// 	date.setDate(1);
	// 	return date.getDay();
	// }
	// var week = getFirstDayWeek(date);
	// console.log(week);
	// console.log(date);


	// 返回上个月有多少天  => 本月的第0天就是上个月的最后一天
	// date = new Date(date);
	// date.setDate(0);
	// console.log(date.getDate());


	// function getLastMonthDays(date) {
	// 	date = new Date(date);
	// 	date.setDate(0);
	// 	return date.getDate();
	// }

	// var lastMonthDays = getLastMonthDays(date);
	// console.log(lastMonthDays);



	// 返回当前月有多少天  => 下个月的第0天就是本月的最后一天

	function getThisMonthDays(date) {
		// 月份切换:问题
		// 大月(31)向小月(30 28 29)切换时 => 可能会超出小月的最大值 => 自动换算 => 出现问题
		// 假如今天: 2022-8-31 
		// 切下个月: 2022-9-31 => 2022-10-1  
		// 日期设置为0:  2022-10-0 => 2022-9-30

		// 怎么解决? => 修改月份之前 => 提前将日期设置为每个月都有的日期即可(1-28)
		// 假如今天: 2022-8-31 
		// 提前设置为1: 2022-8-1
		// 切下个月: 2022-9-1
		// 日期设置为0:  2022-9-0 => 2022-8-31

		date = new Date(date);
		date.setDate(1);
		// var month = date.getMonth(); // 当前月 0-11  !!!
		// date.setMonth(month + 1);  // 设置为 下一个月
		date.setMonth(date.getMonth() + 1);  //  设置为 下一个月

		date.setDate(0);  // 下个月的第0天
		return date.getDate();
	}

	var lastMonthDays = getThisMonthDays(date);
	console.log(lastMonthDays);




</script>

</html>